<template>
  <div class="pad-content-box form-no-padding-box margin-top-20">
    <el-form label-width="100px" size="small" ref="sureForm" :model="searchParams">
      <el-row :gutter="50">
        <el-col :span="12">
          <el-form-item label="合同编号" prop="contractCode">
              <el-input v-model="searchParams.contractCode" placeholder="请输入" clearable :readonly="contractCode?true:false"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="租户名称" :readonly="contractCode?true:false" prop="customerName">
            <el-input v-model="searchParams.customerName" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-button type="primary" size="small" class="f-right" @click="getList">查询</el-button>
          <el-button type="primary" size="small"   class="f-right margin-right-10" @click="out()">Excel导出</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table class="has-tab-header-border new-table-style" border  :data="tableData" ref="multipleTable">
      <el-table-column  label="合同号" prop="contractCode"> </el-table-column>
      <el-table-column  label="租户" prop="customerName"> </el-table-column>
      <el-table-column  label="资产编码" prop="assetCode" width="110"></el-table-column>
      <el-table-column  label="合同总额" prop="contractAmount" width="100"> </el-table-column>
      <el-table-column  label="需确认总额" prop="confirmAmount" width="110"> </el-table-column>
      <el-table-column  label="已确认总额" prop="alreadyConfirmAmount" width="110"> </el-table-column>
      <el-table-column  label="待确认总额" prop="toBeConfirmAmount" width="110"> </el-table-column>
      <el-table-column  label="合同开始日期" width="120" prop="contractBeginDate">
        <template slot-scope="scope">
          <span>{{ scope.row.contractBeginDate | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="合同结束日期" width="120" prop="contractEndDate">
        <template slot-scope="scope">
          <span>{{ scope.row.contractEndDate | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="租赁期" prop="rentMonth" width="80"> </el-table-column>
    </el-table>
    <Pagination v-if="total" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next"/>
  </div>
</template>

<script>
  import {apiBusinessDetailedQuery,apiGatherDetailExport} from '../../../api/gatherManage';
  export default {
    name: 'salesReport',
    props:{
      contractCode:{
        type:String,
        default:()=>{
          return ''
        }
      },
      customerName:{
        type:String,
        default:()=>{
          return ''
        }
      },
    },
    data() {
      return {
        searchParams:{},
        tableData:[],
        currentPage: 1,
        pageSize: 10,
        total:0
      };
    },
    watch:{
      contractCode:{
        handler(val){
          this.searchParams.contractCode = val
        },
        deep:true,
        immediate:true
      },
      customerName:{
        handler(val){
          this.searchParams.customerName = val
        },
        deep:true,
        immediate:true
      },
    },
    methods: {
      async getList(more){
        let res = await apiBusinessDetailedQuery({
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
          ...this.searchParams,
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },
      async out(){
        let res = await apiGatherDetailExport({
          ...this.searchParams,
          projectId:localStorage.getItem('projectKey')
        })
        window.location.href = res.url
      },
      //分页
      pageChange(page) {
        this.currentPage = page.currentPage
        this.getList('more');
      },
      closeDialog(data){
        this.$emit('closeDialog',data)
        this.tableData=[]
      }
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .has-tab-header-border .el-tabs__header {
    border: none;
  }
  ::v-deep .cell{
    text-align: center;
  }
  .dialog-footer{
    display: flex;
    justify-content: flex-end;
    margin-top:30px;
  }
</style>
